<template>
    <div style="height: 90%">
        <el-form>
            <el-row>

            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="课程名称"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="合约总课时"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="starttime"
                    label="开始时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="duriationtime"
                    label="结束时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                </el-table-column>
                <el-button-group>
                 <!--   <el-tooltip content="退费" placement="top">
                        <el-button @click="purchase" class="col-btn" size="mini" type="primary"
                                   icon="el-icon-goods"></el-button>
                    </el-tooltip>-->
                    <el-tooltip content="续费" placement="top">
                        <el-button @click="rechargeoper" class="col-btn" size="mini" type="primary"
                                   icon="el-icon-delete"></el-button>
                    </el-tooltip>
                </el-button-group>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog title="合约购买" :visible.sync="purchaseVisible">
           <add-contract></add-contract>
            <template slot="footer">
                <el-row v-show="isAdd" type="flex" justify="end">
                    <el-button @click="closepurchase" type="info" plain size="mini">取消</el-button>
                    <el-button @click="panelpurchase" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import addContract from '@/page/addContract'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: 'userDetailCharge',
        props: {},
        data() {
            return {
                purchaseVisible:false,
                sid:null,
                childForm: {},
                tableData: [],
                loading: false,
                contractForm:{},
                pager: {pageNo: 1, pageSize: 5},
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addContract

        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {
            rechargeoper(){
              this.purchaseVisible=true;
            },

           async  recharge(){
                const res = await addContractApi({data:this.contractForm});
                if(res.success==true){

                }else {

                }
            },
            tableRowClassName({row, rowIndex}) {

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pager.pageNo = val;
                this.initData()
            },
            async initData(){
                this.childForm.sid=this.sid;
                this.childForm.pager=this.pager;
                const res=await contractListApi({data:childForm});
                if(res.success==true){
                    var datas=res.data;
                    datas.forEach(item=>{
                        const data={};
                        data.cname=item.cname;
                        data.totalrecords=item.totalrecords;
                        data.starttime=item.starttime;
                        data.endtime=item.endtime;
                    })
                }
                else {

                }




            }
        },
    }
</script>
<style lang="less" scoped>
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }


</style>
